<template>
  <view class="navigation">


    <view class="title">
      <view>
        <text>当前已选择：</text>
        <text class="name">{{ tName }}</text>
      </view>
      <!--<view class="tip">今日1人已约，最早可约7:30</view>-->
    </view>

    <view class="navigation-wrapper">

      <view class="nav">
        <view class="item" v-for="(item,i) in navs" :key="i" :class="{current:i == current}"
              @click="handleNavClick(item,i)">
          {{ item.classifyName }}
        </view>
      </view>
      <!--项目-->
      <view class="list goods">
        <view class="item" v-for="(item,i) in list" :key="i">
          <image class="avatar" :src="item.cover"></image>
          <view class="right">
            <view class="top">
              <view class="name">{{ item.goodsName }}</view>
              <view class="btn" @click="handleProjectClick(item)">选择</view>
            </view>
            <view class="price">
              <view class="tip">￥{{ item.price }}</view>
              <view class="line" v-if="item.linePrice != '0.00'">￥{{ item.linePrice }}</view>
            </view>
            <view class="time">
              <text>预计服务时长</text>
              <text class="light">{{ item.cycle }}</text>
              <text> 分钟</text>
            </view>
          </view>
        </view>


        <list-loading v-if="loading"/>
        <list-empty v-if="!loading && (!list || list.length == 0)"/>
        <list-load-over v-else-if=" loadOver"/>
      </view>

    </view>


  </view>

</template>

<script>
import ListLoading from "@/components/list/loading";
import ListEmpty from "@/components/list/empty";
import ListLoadOver from "@/components/list/loadOver";
import Api from "@/utils/Api";

export default {
  name: "choose-project",
  components: {ListLoadOver, ListEmpty, ListLoading},
  data() {
    return {
      current: 0,
      navs: [],
      loading: false,
      loadOver: false,
      list: [],
      tId: null,
      tName: null,
      shopId: null,
    }
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    this.tId = options.tId;
    this.tName = options.tName;
    this.shopId = options.shopId;

    this.getClassify(true);
  },
  methods: {
    handleNavClick(item, i) {
      this.current = i;
      this.clear();
      this.getList();
    },
    handleProjectClick(item) {
      let classify = this.navs[this.current];
      let data = {
        classifyId: classify.id,
        classifyName: classify.classifyName,
        goodsId: item.id,
        goodsName: item.goodsName,
        tId: this.tId,
        tName: this.tName,
        price: item.price,
        linePrice: item.linePrice
      }
      uni.navigateTo({url: `/pages/shop/choose/time/index?${this.core.parseQueryString(data)}`})
    },
    clear() {
      this.page = 0;
      this.list = [];
      this.loadOver = false;
      this.loading = false;
    },
    getClassify(first) {
      this.core.showLoading();
      Api.getGoodsClassify(this.shopId).then(res => {
        this.navs = res;
        first && this.getList();
      }).finally(uni.hideLoading)
    },
    getList() {
      if (this.loadOver) return;
      this.loading = true;

      let data = {
        goods_classify_id: this.navs[this.current].id,
        member_id: this.tId,
        page: ++this.page
      };
      Api.getGoods(data).then(res => {
        this.list.push(...res);
        if (res.length < 10) this.loadOver = true;
      }).finally(() => this.loading = false)
    },
  },
}
</script>

<style scoped lang='scss'>
.navigation {

  & > .title {
    height: r(150px);
    background-color: white;
    font-size: r(30px);
    color: #909090;
    padding-left: r(40px);
    position: sticky;
    top: var(--window-top);
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .name {
      color: #333333;
    }

    .tip {
      font-size: r(22px);
      font-weight: bold;
      color: #FF531E;
      margin-top: 10px;
    }
  }

  .navigation-wrapper {
    display: flex;
    background-color: white;
    align-items: flex-start;
    min-height: calc(100vh - #{r(150px)} - var(--window-top));
  }

  .nav {
    width: r(160px);
    background: #F9F9F9;
    font-size: r(30px);
    margin-bottom: env(safe-area-inset-bottom);
    position: sticky;
    top: calc(var(--window-top) + #{r(150px)});
    left: 0;

    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: r(30px 40px);
      color: #909090;

      &.current {
        color: #333333;
        background-color: white;
      }
    }
  }

  .list {
    flex: 1;
    width: calc(100% - #{r(160px)});
    overflow-x: hidden;
    padding: r(30px);
    padding-bottom: calc(env(safe-area-inset-bottom) + #{r(30px)});

    .item {
      box-shadow: r(0px 4px 18px 0px) rgba(4, 0, 0, 0.13);
      border-radius: r(15px);
      overflow: hidden;
      padding: r(20px);
      display: flex;
      margin-bottom: r(30px);

      .avatar {
        height: r(138px);
        width: r(138px);
        border-radius: r(12px);
      }

      .right {
        flex: 1;

        .top {
          margin-left: r(20px);
          display: flex;
          justify-content: space-between;
          align-items: center;

          .name {
            flex: 1;
          }

          .btn {
            color: white;
            width: r(100px);
            height: r(45px);
            line-height: r(45px);
            background: #BF8F3A;
            border-radius: r(50px);
            font-size: r(22px);
            text-align: center;
          }
        }

        .tip {
          font-size: r(22px);
          font-weight: bold;
          color: #FF531E;
          margin: r(10px 0 10px 20px);
        }

        .image-list {
          display: flex;
          margin: r(20px 0);

          .image-wrapper {
            $image-size: calc(33.33% - #{r(20px)});
            height: 0;
            padding-bottom: $image-size;
            width: $image-size;
            position: relative;
            margin-left: r(20px);
            border-radius: r(12px);
            overflow: hidden;

            .image {
              height: 100%;
              width: 100%;
              position: absolute;
            }
          }
        }

        .more {
          font-size: r(20px);
          color: #909090;
          margin-left: r(20px);
        }

      }
    }


    &.goods {

      .item {
        .price {
          display: flex;
          justify-content: space-between;
          padding-left: r(12px);
          align-items: flex-end;
          margin: r(12px 0);

          .line {
            font-size: r(25px);
            color: #909090;
            text-decoration: line-through;
          }

          .tip {
            margin: 0;
          }
        }

        .tip {
          margin-top: 0;
          font-size: r(30px);
        }

        .time {
          padding-left: r(12px);
          color: #aaa;
          font-size: r(20px);

          .light {
            color: #ff6e42;
            margin: r(0 10px);
          }
        }
      }

    }
  }

}

</style>